<template>
  <div>
    <a-dropdown>
      <a-menu slot="overlay" @click="handleStateMenuClick">
        <a-menu-item :key="i" v-for="(item,i) in stateList">{{item.label}}</a-menu-item>
      </a-menu>
      <a-button type="danger" size="small" icon="swap">更新订单状态</a-button>
    </a-dropdown>
    <a-button style="margin:0 0 20px 20px;" size="small" type="primary" icon="xlsx" @click="handleDownload">导出Excel</a-button>
    <div style="display:flex;align-items:center;padding-bottom:10px">
      <div>
        关键字：
        <a-input
          style="width:180px;"
          v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
          placeholder="订单号/地址/电话/寄件人/收件人"
        >
          <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </div>

      <div style="display:flex;align-items:center;margin-left:20px; ">
        日期：
        <a-range-picker style="width:200px;margin-right:20px;">
          <template slot="dateRender" slot-scope="current">
            <div class="ant-calendar-date" :style="getCurrentStyle(current)">{{ current.date() }}</div>
          </template>
        </a-range-picker>状态：
        <a-select
          mode="multiple"
          :size="size"
          placeholder="订单状态"
          :default-value="[]"
          style="width: 140px;margin-right:25px;"
        >
          <a-select-option key="待付款">待付款</a-select-option>
          <a-select-option key="待发货">待发货</a-select-option>
          <a-select-option key="已发货">已发货</a-select-option>
          <a-select-option key="已送达">已送达</a-select-option>
        </a-select>
        <a-button type="primary" html-type="submit" icon="search">搜 索</a-button>
      </div>
    </div>
    <a-table
      rowKey="id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :pagination="false"
      :columns="columns"
      :data-source="data"
      :scroll="{ y: 280 }"
      style="text-align:center; "
    >
      <span slot="sender" slot-scope="t,r">
        <a-popover>
          <template slot="content">
            <div style="font-size:13px;">电话：{{r.s_tel}}</div>
          </template>
          <div style="font-size:14px; text-decoration: underline;">{{r.sender}}</div>
        </a-popover>
      </span>

      <a-tag :color="t | fmtColor" slot="state" slot-scope="t">{{t | fmtState}}</a-tag>

      <span slot="receiver" slot-scope="t,r">
        <a-popover>
          <template slot="content">
            <div style="font-size:13px;">电话：{{r.r_tel}}</div>
            <div>地址：{{r.address}}</div>
          </template>
          <div style="font-size:14px; text-decoration: underline;">{{r.receiver}}</div>
        </a-popover>
      </span>
      <span slot="action" slot-scope="text,r">
        <a-dropdown style="margin:0px;">
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            更新状态：
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item
              @click="setState(r.id,item.state)"
              :key="i"
              v-for="(item,i) in stateList.filter((z,index)=>r.state !==z.state)"
            >{{item.label}}</a-menu-item>
          </a-menu>
        </a-dropdown>
        <a-divider type="vertical" />
        <a-dropdown style="margin:0px;">
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            操作
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <router-link :to="'/detail/'+r.id">详情</router-link>
            </a-menu-item>
            <a-menu-item @click="del(r.id)">删除</a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </a-table>
    <Center>
      <a-pagination
        v-model="current"
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        :page-size="pageSize"
        @showSizeChange="onShowSizeChange"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </Center>
  </div>
</template>

<script>
import Center from "@/components/Center";

const columns = [
  {
    dataIndex: "orderno",
    key: "orderno",
    title: "订单号",
    width: 190,
  },
  {
    title: "寄件人",
    dataIndex: "sender",
    key: "sender",
    scopedSlots: { customRender: "sender" },
  },
  {
    title: "收件人",
    dataIndex: "receiver",
    key: "receiver",
    scopedSlots: { customRender: "receiver" },
  },

  {
    title: "订单状态",
    key: "state",
    dataIndex: "state",
    scopedSlots: { customRender: "state" },
  },
  {
    title: "下单时间",
    key: "createtime",
    dataIndex: "createtime",
  },
  {
    title: "订单价格",
    key: "price",
    dataIndex: "price",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: "210px",
  },
];

columns.forEach((r) => (r.align = "center"));

export default {
  name: "Index",
  components: {
    Center,
  },
  filters: {
    fmtState(val) {
      return ["待发货", "已发货", "待付款", "已送达"][val];
    },
    fmtColor(val) {
      return ["pink", "orange", "green", "red"][val];
    },
  },
  data() {
    return {
      selectedRows: [],
      stateList: ["待发货", "已发货", "待付款", "已送达"].map((r, i) => ({
        state: i,
        label: r,
      })),
      id: "1",
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
      add_modal_loading: false,
      visible: false,
      selectedRowKeys: [],
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      current: 1,
      pageSize: 10,
      total: 50,
      collapsed: false,
      size: "default",
      columns,
      data: [],
    };
  },
  watch: {
    current() {
      this.getList();
    },
  },
  methods: {
    handleDownload() {
      if (!this.selectedRows.length) return this.$mw("请选择要导出的数据！");

      import("@/plugin/utils/Export2Excel").then((excel) => {
        const tHeader = [
          "编号",
          "单号",
          "寄件人",
          "寄件人号码",
          "收件人",
          "收件人号码",
        ];

        const keys = ["id", "orderno", "sender", "s_tel", "receiver", "r_tel"];

        const data = this.selectedRows.map((r) => {
          return keys.map((k) => r[k]);
        });
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "订单列表_" + new Date().getFormatText(),
        });
      });
    },
    handleStateMenuClick({ key: state }) {
      this.$mc("您确定修改吗？", async () => {
        let { success } = await this.$post("/order/updateMultiState", {
          ids: this.selectedRowKeys.join(","),
          state,
        });
        if (success) {
          this.$ms("修改成功！");
          this.getList();
        }
      });
      this.selectedRowKeys, state;
    },
    handleCancel() {
      this.visible = false;
    },
    setState(id, state) {
      this.$mc("您确定修改吗？", async () => {
        let { success } = await this.$post("/order/updatestate", { id, state });
        if (success) {
          this.$ms("修改成功！");
          this.getList();
        }
      });
    },

    async getList() {
      let { data } = await this.$get("/order/list", {
        pageIndex: this.current,
        pageSize: this.pageSize,
      });
      this.data = data.list;
      this.total = data.count;
    },
    del(id) {
      this.$mc("您确定删除吗？", async () => {
        let { success } = await this.$post("/order/del", { id });
        if (success) {
          this.$ms("删除成功！");
          this.getList();
        }
      });
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    getCurrentStyle(current) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
    onShowSizeChange(i, size) {
      this.pageSize = size;
      this.getList();
    },
  },
  async created() {
    this.getList();
  },
};
</script>

<style scoped lang='scss'>
</style>